<template>
  <!-- 引入vant中的导航栏组件 -->
  <van-tabbar v-model="active">
    <van-tabbar-item icon="home-o" @click="GoPageFn(active)"
      >首页</van-tabbar-item
    >
    <van-tabbar-item icon="search" @click="GoPageFn(active)"
      >内容</van-tabbar-item
    >
    <van-tabbar-item icon="friends-o" @click="GoPageFn(active)"
      >关于</van-tabbar-item
    >
    <van-tabbar-item icon="setting-o" @click="GoPageFn(active)"
      >歌曲</van-tabbar-item
    >
  </van-tabbar>

  <!-- vue-router 内置的组件 -- 路由视图--根据不同url路径切换不同组件-->
  <router-view></router-view>
</template>
<script>
export default {
  data() {
    return {
      active: 0,
    };
  },
  methods: {
    GoPageFn(active) {
      switch (active) {
        case 0:
          this.$router.push("/");
          break;
        case 1:
          this.$router.push("/content");
          break;
        case 2:
          this.$router.push("/about");
          break;
        case 3:
          this.$router.push("/song");
          break;
        default:
          console.log("前端这么简单都写不明白？");
          break;
      }
    },
  },
};
</script>
<style scoped>
.wrap {
  margin: 0 auto;
}
</style>

